<template>
    <div id="diagramContainer">
        <div id="item_left" class="item a">A</div>
        <div id="item_right" class="item b">
            B
            <span class="del-btn" title="点击删除节点" @click="deleteNode('item_right')">x</span>
        </div>
    </div>
</template>
<script lang="js" setup>
import { ref, reactive,onMounted, computed } from 'vue';
import { jsPlumb } from 'jsplumb';

const $jsPlumb = jsPlumb
// isSource和isTarget设置成true，用户在拖动时，自动创建连接。
const common = reactive({
    isSource: true,
    isTarget: true,
    connector: ['Bezier'], // 连接线类型：贝塞尔曲线
    endpoint: ['Dot', { radius: 10, cssClass: 'circle', hoverClass: 'circle1' }], // 端点类型：圆点
    connectorStyle: { stroke: 'rgb(68, 85, 102)', fill: 'none', strokeWidth: 1 },
    connectorHoverStyle: { strokeWidth: 3 },
    paintStyle: {
        fill: 'rgb(68, 85, 102)',
        strokeWidth: 4
    },
    hoverPaintStyle: {
        fill: 'rgb(68, 85, 102)',
    },
    maxConnections: -1, // 端点默认只能有一条线，可以配置-1表示无限条连接线
    connectorOverlays: [ ['Arrow', { width: 20, length: 20, location: 1 }]] // 配置箭头样式
})

// 点击删除节点
const deleteNode = id => {
    $jsPlumb.remove(id)
}

// 获取数据模型
$jsPlumb.bind('connection', function (info, originalEvent) {
    console.log(info, originalEvent, '更新数据模型');
})
// 单击连接线事件
$jsPlumb.bind('click', function (line, originalEvent) {
    $jsPlumb.deleteConnection(line)
})
// 初始化jsplumb
const initJsplumb = () => {
    $jsPlumb.ready(function(){
        $jsPlumb.setContainer('diagramContainer')
        $jsPlumb.addEndpoint('item_left', { anchors: ['Right'] }, common)
        $jsPlumb.addEndpoint('item_left', { anchors: ['Left'] }, common)
        $jsPlumb.addEndpoint('item_left', { anchors: ['Bottom'] }, common)
        $jsPlumb.addEndpoint('item_left', { anchors: ['Top'] }, common)
        $jsPlumb.addEndpoint('item_right', { anchors: ['Left'] }, common)
        $jsPlumb.addEndpoint('item_right', { anchors: ['Right'] }, common)
        $jsPlumb.addEndpoint('item_right', { anchors: ['Bottom'] }, common)
        $jsPlumb.addEndpoint('item_right', { anchors: ['Top'] }, common)
        
        // 配置可拖拽节点区域
        $jsPlumb.draggable('item_left', {
            containment: 'parent'
        })
        $jsPlumb.draggable('item_right', {
            containment: 'parent'
        })
    })
}
onMounted(() => {
    initJsplumb()
})
  
</script>

<style scoped lang="scss">
#diagramContainer {
    padding: 20px;
    height: 500px;
    border: 1px solid gray;
    display: flex;
    justify-content: space-around;
    position: relative;
}
.circle:hover {
    circle {
        fill: tomato;
    }
}
.item {
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid #10AC84;
    font-size: 20px;
    font-weight: 600;
    cursor: move;
    .del-btn {
        cursor: pointer;
        position: absolute;
        right: 2px;
        top: -34px;
    }
    &.a {
        position: absolute;
        left: 50px;
    }
    &.b {
        position: absolute;
        right: 60px;
    }
}
</style>
